<template>
  <div class="card">
    <div class="card-bg">
      <img class="card-top" src="../assets/EquipmentGrossStateUp.png" />
      <div class="card-middle"></div>
      <img class="card-bottom" src="../assets/EquipmentGrossStateDown.png" />
    </div>
    <div class="two-element">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {

};
</script>

<style lang="scss" scoped>
.card {
  position: relative;
}

.card-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
}

.card-top,
.card-bottom {
  width: 100%;
  min-height: 0;
}

.card-middle {
  background-size: 100%;
  background-repeat: repeat-y;
  flex-grow: 1;
  background-image: url('../assets/EquipmentGrossStateCentre.png');
  background-size: 100%;
}

.two-element {
  height: 100%;
  position: relative;
  z-index: 10;
}
</style>
